<template>
  <iframe :id="id" ref="iframe" :src="url" frameborder="0" width="100%" :height="height" scrolling="auto" />
</template>

<script setup lang="ts">
const props = defineProps({
  httpUrl: { type: String, default: '' }
});
const height = ref('');
const url = ref('');
const id = ref('');
const iframe = ref();
watch(
  () => props.httpUrl,
  () => {
    goUrl();
  },
  { immediate: true }
);
onMounted(() => {
  height.value = iframe.value.parentNode.offsetHeight;
});
function loadData() {
  if (typeof iframe.value.contentWindow.loadData === 'function') {
    iframe.value.contentWindow.loadData(); // 调用子窗口的方法
  }
}
function goUrl() {
  if (props.httpUrl !== null && props.httpUrl !== undefined) {
    url.value = props.httpUrl;
  }
}
defineExpose({
  loadData
});
</script>
